<template>
	<view class="container">
		<view class="title" v-if="debug">我是A页面类型3的页面</view>
		<view class="title">{{name}}</view>
		<!-- 添加数据区域 -->
		<view class="add-section">
			<view class="section-title">添加数据</view>
			<view class="input-group">
				<input type="text" v-model="newItem.name" placeholder="请输入名称" class="input" />
				<input type="text" v-model="newItem.desc" placeholder="请输入描述" class="input" />
				<button @click="addItem" class="btn add-btn">添加</button>
			</view>
		</view>

		<!-- 数据列表区域 -->
		<view class="list-section">
			<view class="section-title">数据列表</view>
			<view class="list-empty" v-if="items.length === 0">
				暂无数据，请添加数据
			</view>
			<view class="list-item" v-for="(item, index) in items" :key="item.id">
				<view class="item-info">
					<view class="item-name">{{ item.name }}</view>
					<view class="item-desc">{{ item.desc }}</view>
					<view class="item-time">{{ formatTime(item.createTime) }}</view>
				</view>
				<view class="item-actions">
					<button @click="editItem(item)" class="action-btn edit-btn">编辑</button>
					<button @click="deleteItem(item.id)" class="action-btn delete-btn">删除</button>
				</view>
			</view>
		</view>

		<!-- 编辑弹窗 -->
		<view class="modal-mask" v-if="isEditModalShow" @click="closeEditModal"></view>
		<view class="modal" v-if="isEditModalShow">
			<view class="modal-title">编辑数据</view>
			<view class="modal-content">
				<input type="text" v-model="editItemData.name" placeholder="请输入名称" class="modal-input" />
				<input type="text" v-model="editItemData.desc" placeholder="请输入描述" class="modal-input" />
			</view>
			<view class="modal-buttons">
				<button @click="closeEditModal" class="modal-btn cancel-btn">取消</button>
				<button @click="saveEdit" class="modal-btn confirm-btn">保存</button>
			</view>
		</view>
	</view>
</template>

<script>
	  import data from '@/static/config_page1/page1_type3_data.json'
	export default {

		data() {
			return {
				name: "",
				debug: false,

				// 新数据对象
				newItem: {
					name: '',
					desc: ''
				},
				// 数据列表
				items: [],
				// 编辑弹窗相关
				isEditModalShow: false,
				editItemData: {
					id: '',
					name: '',
					desc: ''
				}
			};
		},
		mounted() {
			console.log("zzzzzzzzz" + JSON.stringify(data))
			this.name = data.name
			this.debug = data.debug
			this.loadData();

		},

		 

		methods: {
			 
			// 从本地存储加载数据
			loadData() {
				const storedItems = uni.getStorageSync('db_example_items');
				console.log("数据" + storedItems)
				this.items = storedItems ? JSON.parse(storedItems) : [];
			},

			// 保存数据到本地存储
			saveData() {
				uni.setStorageSync('db_example_items', JSON.stringify(this.items));
			},

			// 添加新数据
			addItem() {
				if (!this.newItem.name) {
					uni.showToast({
						title: '请输入名称',
						icon: 'none'
					});
					return;
				}

				// 创建新数据对象
				const newData = {
					id: Date.now().toString(), // 使用时间戳作为唯一ID
					name: this.newItem.name,
					desc: this.newItem.desc,
					createTime: new Date().getTime()
				};

				// 添加到列表并保存
				this.items.unshift(newData); // 插入到数组开头
				this.saveData();

				// 重置输入框
				this.newItem = {
					name: '',
					desc: ''
				};

				uni.showToast({
					title: '添加成功',
					icon: 'success'
				});
			},

			// 编辑数据
			editItem(item) {
				// 复制数据到编辑对象
				this.editItemData = {
					...item
				};
				this.isEditModalShow = true;
			},

			// 保存编辑
			saveEdit() {
				if (!this.editItemData.name) {
					uni.showToast({
						title: '请输入名称',
						icon: 'none'
					});
					return;
				}

				// 查找并更新数据
				const index = this.items.findIndex(item => item.id === this.editItemData.id);
				if (index !== -1) {
					this.items[index] = this.editItemData;
					this.saveData();

					uni.showToast({
						title: '更新成功',
						icon: 'success'
					});

					this.closeEditModal();
				}
			},

			// 删除数据
			deleteItem(id) {
				uni.showModal({
					title: '提示',
					content: '确定要删除这条数据吗？',
					success: (res) => {
						if (res.confirm) {
							// 过滤掉要删除的数据
							this.items = this.items.filter(item => item.id !== id);
							this.saveData();

							uni.showToast({
								title: '删除成功',
								icon: 'success'
							});
						}
					}
				});
			},

			// 关闭编辑弹窗
			closeEditModal() {
				this.isEditModalShow = false;
			},

			// 格式化时间
			formatTime(timestamp) {
				const date = new Date(timestamp);
				return `${date.getFullYear()}-${(date.getMonth() + 1).toString().padStart(2, '0')}-${date.getDate().toString().padStart(2, '0')} ${date.getHours().toString().padStart(2, '0')}:${date.getMinutes().toString().padStart(2, '0')}`;
			}
		}
	};
</script>

<style scoped>
	.container {
		padding: 16px;
		background-color: #f5f5f5;
		min-height: 100vh;
	}

	.title {
		font-size: 20px;
		font-weight: bold;
		text-align: center;
		margin-bottom: 24px;
		color: #333;
	}

	.section-title {
		font-size: 16px;
		font-weight: bold;
		margin-bottom: 12px;
		color: #555;
		padding-left: 4px;
		border-left: 3px solid #007aff;
	}

	.add-section,
	.list-section {
		background-color: #fff;
		border-radius: 8px;
		padding: 16px;
		margin-bottom: 16px;
		box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
	}

	.input-group {
		display: flex;
		flex-direction: column;
		gap: 10px;
	}

	.input {
		height: 40px;
		line-height: 40px;
		padding: 0 10px;
		border: 1px solid #ddd;
		border-radius: 4px;
	}

	.btn {
		height: 44px;
		line-height: 44px;
		border-radius: 4px;
		font-size: 16px;
	}

	.add-btn {
		background-color: #007aff;
		color: #fff;
	}

	.list-item {
		display: flex;
		justify-content: space-between;
		align-items: center;
		padding: 12px;
		border-bottom: 1px solid #eee;
	}

	.list-item:last-child {
		border-bottom: none;
	}

	.item-info {
		flex: 1;
	}

	.item-name {
		font-weight: bold;
		margin-bottom: 4px;
		color: #333;
	}

	.item-desc {
		color: #666;
		font-size: 14px;
		margin-bottom: 4px;
	}

	.item-time {
		color: #999;
		font-size: 12px;
	}

	.item-actions {
		display: flex;
		gap: 8px;
	}

	.action-btn {
		padding: 0 10px;
		height: 30px;
		line-height: 30px;
		font-size: 14px;
	}

	.edit-btn {
		background-color: #4cd964;
		color: #fff;
	}

	.delete-btn {
		background-color: #ff3b30;
		color: #fff;
	}

	.list-empty {
		text-align: center;
		padding: 30px 0;
		color: #999;
		font-size: 14px;
	}

	/* 弹窗样式 */
	.modal-mask {
		position: fixed;
		top: 0;
		left: 0;
		right: 0;
		bottom: 0;
		background-color: rgba(0, 0, 0, 0.5);
		z-index: 999;
	}

	.modal {
		position: fixed;
		left: 50%;
		top: 50%;
		transform: translate(-50%, -50%);
		width: 80%;
		max-width: 500px;
		background-color: #fff;
		border-radius: 8px;
		z-index: 1000;
		padding: 16px;
	}

	.modal-title {
		font-size: 18px;
		font-weight: bold;
		margin-bottom: 16px;
		text-align: center;
		color: #333;
	}

	.modal-content {
		display: flex;
		flex-direction: column;
		gap: 10px;
		margin-bottom: 20px;
	}

	.modal-input {
		height: 40px;
		line-height: 40px;
		padding: 0 10px;
		border: 1px solid #ddd;
		border-radius: 4px;
	}

	.modal-buttons {
		display: flex;
		gap: 10px;
	}

	.modal-btn {
		flex: 1;
		height: 44px;
		line-height: 44px;
		font-size: 16px;
	}

	.cancel-btn {
		background-color: #f5f5f5;
		color: #333;
	}

	.confirm-btn {
		background-color: #007aff;
		color: #fff;
	}
</style>